<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th,td{
            width: 100;
        }
    </style>
</head>
<body>
    <!-- 表格 -->

    <!-- 
    
    基础 
    创建一个表格至少要三个标签 table tr td
    table：表格 大结构
    tr：表格的行
    td：表格数据 表格单元格

    -->

    <!-- 
        th 表头
        默认文字粗体居中
    -->

    <table border="1" style="border-collapse: collapse;">

        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>

        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
            <td>第一行，第三列</td>
            <td>第一行，第四列</td>
        </tr>

        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
            <td>第二行，第三列</td>
            <td>第二行，第四列</td>
        </tr>

        <tr>
            <td>第三行，第一列</td>
            <td>第三行，第二列</td>
            <td>第三行，第三列</td>
            <td>第三行，第四列</td>
        </tr>
    </table>

    <!-- 合并单元格 -->

    <!-- 
    rowspan 跨行合并 上下
    colspan 跨列合并 左右
    属性值：数字 数字代表跨行列的个数    
    -->

    <!-- 
    先列出所有行 tr 以最小单元格为标准
    再添加每一行的td或th单元格
    划分单元格所在行时 顶边对齐的属同一行
    行和列写完后再查看哪个单元格有跨行或者跨列 属性值的个数要参考最小的单元格
    -->
    <br />
    <table border="1" style="border-collapse: collapse;">
        <!-- 4行5列 -->

        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="2">3</td>
        </tr>

        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>

        <tr>
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>
        </tr>

        <tr>
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
        
    </table>

    <!-- 表格分区 -->

    <!-- 
        table内部最直接的子集包含四个分区标签 都是双标签

        caption: 表格的标题
        thead: 表格的头部 内部嵌套tr>th
        tbody: 表格的主体 内部嵌套tr>td
        tfoot: 表格的页脚 内部嵌套tr>td

        四个分区可以选择性的进行组合
        顺序颠倒不影响浏览器的加载顺序 caption - thead - tbody - tfoot

        技巧：
        先书写大分区标签结构
        填充每个分区的内部内容

    -->

    <table border="1" style="border-collapse: collapse;">
        <!-- 先进行分区 -->
         <caption>各地区固定资产投资情况</caption>
         <thead>
            <tr>
                <th rowspan="2">地区</th>
                <th colspan="2">按总量分</th>
                <th colspan="2">按比重分</th>
            </tr>
            <tr>
                <th>自年初累计（亿元）</th>
                <th>比去年同期增长%</th>
                <th>自年初累计（%）</th>
                <th>去年同期（%）</th>
            </tr>
         </thead>
         <tbody>
            <tr>
                <td>全国</td>
                <td>1234567.89</td>
                <td>9.5</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>

            <tr>
                <td>全国</td>
                <td>1234567.89</td>
                <td>9.5</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>

            <tr>
                <td>全国</td>
                <td>1234567.89</td>
                <td>9.5</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>

            <tr>
                <td>全国</td>
                <td>1234567.89</td>
                <td>9.5</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>

            <tr>
                <td>全国</td>
                <td>1234567.89</td>
                <td>9.5</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
         </tbody>
    </table>


</body>
</html>